iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 30
2
Modern Web

Angular 全集中筆記系列 第 30

第 30 型 - 環境配置與建構 (Build)

  • 分享至 

  • xImage
  •  

實務上,因應不同的開發階段,應用程式會運行在開發環境 (Develop Environment)、預備環境 (Staging Environment) 以及正式環境 (Production Environment) 等不同環境內,因此會利用 environments 目錄下的環境設定檔,來定義在不同環境下應用程式內部邏輯所需要的資訊。

利用環境變數檔定義後端服務位址

在 Angular 應用程式中,會將環境變數定義在 environments 目錄之內,並依環境建立各自的設定檔。因此,可以在 environment.ts 中定義後端服務的 API 位址,以在未來的建構時依環境變更其值。

export const environment = {
  production: false,
  api: 'http://localhost:3000',
};

要在程式中使用環境變數,只要將 environment.ts 匯入即可;因此,可以修改 task-remote.service.ts 檔案的後端服務路徑。

import { environment } from '../../../environments/environment';

export class TaskRemoteService {
  private _url = `${environment.api}/tasks`;
}

順帶一提,在程式中所匯入的路徑,會依照其相對位置而有所不同;此時,可以利用 tsconfig.json 內的定義來統一管理。因此可以在 tsconfig.json 中加入環境變數檔案的路徑定義,讓所有使用環境變數的程式可以從 @environment 匯入。

{
  "compilerOptions": {
	...
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "@environment": ["./src/environments/environment"]
    }
  }
}
import { environment } from '@environment';

export class TaskRemoteService {
  private _url = `${environment.api}/tasks`;
}

新增預備環境 (Staging Environment) 定義

預設中,利用 Angular CLI 所建立的專案,會包含生產環境 (Production Environment) 的變數定義。當使用 buildservetest 等 Angular CLI 指令時,皆可透過 --configuration 參數的指定來使用不同的環境變數檔案。

若要針對預備環境 (Staging Environment) 設定環境變數,可以先將 environment.ts 複製一份,並將其命名為 environment.staging.ts;接著,在 angular.jsonconfigurations 屬性下加入 staging 設定,透過 fileReplacements 屬性可以定義環境變數檔案的替換。

"configurations": {
  "production": { },
  "staging": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.stage.ts"
      }
    ]
  }
}

如此一來就可以執行 ng build --configuration=staging 來建構預備環境的應用程式封裝檔。若要進一步也在 ng serve 中使用此設定,就需要在 angular.json 中的 serve 屬性加入 staging 定義。

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "todo:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "todo:build:production"
    },
    "staging": {
      "browserTarget": "todo:build:staging"
    }
  }
}

利用 ng build 建構 Angular 應用程式

最後,開發完應用程式後,可以執行 ng build --prod 來建構 Angular 應用程式的封裝檔,其中 --prod 參數與指定 --configuration=production 相同。而所建構出來的檔案預設會放在 dist/todo 目錄內,只是將此目錄的檔案複製到伺服器內即可;順帶一提,若要變更 build 所輸出的目錄,可以修改 angular.jsonbuild 屬性下的 outputPath

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/todo",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "aot": true,
    "assets": ["src/favicon.ico", "src/assets"],
    "styles": ["./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.css"],
    "scripts": []
  },

結論

Angular 框架在每個開發階段都提供了不少好用的工具,只要擅加利用並搭配 CI 等工具,能簡化所需要的常務作業,更能聚焦在功能需求的實作。


上一篇
第 29 型 - 單元測試 (Unit Testing)
系列文
Angular 全集中筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Y.Ran
iT邦新手 5 級 ‧ 2020-10-15 21:42:51

/images/emoticon/emoticon42.gif
耶,可喜可賀,撐過30天了~~

我要留言

立即登入留言